<template>
  <div>
    <el-card class="x-card">
      <div slot="header">
        <span class="card-header-title">基本信息</span>
      </div>
      <div>
        <el-form :rules="rules" :inline="false" :model="form" label-position="right" style="width: 440px;" label-width="80px">
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name" placeholder="名称"></el-input>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="form.type" placeholder="类型">
              <el-option label="类型一" value="1"></el-option>
              <el-option label="类型二" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="form.dateRange"
              type="daterange"
              align="right"
              placeholder="选择日期范围"
              :picker-options="dateRangeOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex">
              <el-radio :label="0">保密</el-radio>
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="等级">
            <el-checkbox-group v-model="form.levels">
              <el-checkbox label="1">一级</el-checkbox>
              <el-checkbox label="2">二级</el-checkbox>
              <el-checkbox label="3">三级</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="图片">
            <el-upload action="http://127.0.0.1:8083/file/upload" list-type="picture-card" :on-success="onPicUploadSuccess">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <div class="form-operate">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </div>
</template>
<script>
  import {Event} from '@/config'
  export default {
    props: {
      saveCallBack: {
        type: Function,
        default: undefined
      },
      cancelCallBack: {
        type: Function,
        default: undefined
      }
    },
    data () {
      return {
        dateRangeOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        form: {
          name: '',
          levels: [],
          dateRange: [],
          sex: '',
          type: '',
          pics: []
        },
        rules: {
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      save () {
        // do save
        if (this.saveCallBack !== undefined) {
          this.saveCallBack()
        } else {
          // close page
          Event.$emit('closeMenu')
        }
      },
      cancel () {
        // do cancel
        if (this.cancelCallBack !== undefined) {
          this.cancelCallBack()
        } else {
          // close page
          Event.$emit('closeMenu')
        }
      },
      onPicUploadSuccess (response, file, fileList) {
        this.pics = fileList
      }
    }
  }
</script>
<style>
  .x-card {
    margin-top: 10px;
  }
  .card-header-title {
    line-height: 36px;
  }
  .form-operate {
    margin-top: 20px;
    text-align: center;
  }
</style>
